<template>
  <div class="page-container">
    <div class="page-header">
      <h2>互动交流</h2>
      <button class="create-btn" @click="showCreateDialog = true">
        <i class="icon">✏️</i>
        发布内容
      </button>
    </div>

    <!-- 分类标签 -->
    <div class="category-tabs">
      <span v-for="tab in tabs" :key="tab.value" :class="['tab-item', { active: currentTab === tab.value }]" @click="currentTab = tab.value">
        <i class="icon">{{ tab.icon }}</i>
        {{ tab.label }}
      </span>
    </div>

    <!-- 内容列表 -->
    <div class="content-list">
      <div v-for="item in filteredContent" :key="item.id" class="content-card">
        <div class="content-header">
          <div class="user-info">
            <img :src="item.avatar" alt="avatar" class="avatar" />
            <div class="user-meta">
              <span class="username">{{ item.username }}</span>
              <span class="post-time">{{ item.time }}</span>
            </div>
          </div>
          <span class="content-tag" :class="item.type">{{ getTypeLabel(item.type) }}</span>
        </div>

        <div class="content-body">
          <h3 class="content-title">{{ item.title }}</h3>
          <p class="content-text">{{ item.content }}</p>
          <div v-if="item.images && item.images.length" class="content-images">
            <img v-for="(img, index) in item.images" :key="index" :src="img" alt="content image" />
          </div>
        </div>

        <div class="content-footer">
          <div class="action-buttons">
            <button class="action-btn" @click="handleLike(item)">
              <i class="icon">{{ item.isLiked ? '❤️' : '🤍' }}</i>
              <span>{{ item.likes }}</span>
            </button>
            <button class="action-btn" @click="handleComment(item)">
              <i class="icon">💬</i>
              <span>{{ item.comments.length }}</span>
            </button>
            <button class="action-btn" @click="handleShare(item)">
              <i class="icon">🔗</i>
              <span>分享</span>
            </button>
          </div>
        </div>

        <!-- 评论区 -->
        <div v-if="item.showComments" class="comments-section">
          <div v-for="comment in item.comments" :key="comment.id" class="comment-item">
            <img :src="comment.avatar" alt="avatar" class="comment-avatar" />
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-username">{{ comment.username }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
            </div>
          </div>
          <div class="comment-input">
            <input type="text" v-model="newComment" placeholder="写下你的评论..." />
            <button @click="submitComment(item)">发送</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布对话框 -->
    <div v-if="showCreateDialog" class="dialog-overlay" @click="showCreateDialog = false">
      <div class="dialog-content" @click.stop>
        <h3>发布内容</h3>
        <div class="form-item">
          <label>类型</label>
          <select v-model="newPost.type">
            <option value="question">提问</option>
            <option value="discussion">讨论</option>
            <option value="note">笔记</option>
          </select>
        </div>
        <div class="form-item">
          <label>标题</label>
          <input type="text" v-model="newPost.title" placeholder="请输入标题" />
        </div>
        <div class="form-item">
          <label>内容</label>
          <textarea v-model="newPost.content" placeholder="请输入内容" rows="4"></textarea>
        </div>
        <div class="form-item">
          <label>图片</label>
          <div class="upload-area">
            <button class="upload-btn">
              <i class="icon">📷</i>
              <span>上传图片</span>
            </button>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="btn-secondary" @click="showCreateDialog = false">取消</button>
          <button class="btn-primary" @click="submitPost">发布</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentInteraction',
  data() {
    return {
      currentTab: 'all',
      showCreateDialog: false,
      newComment: '',
      newPost: {
        type: 'discussion',
        title: '',
        content: '',
        images: []
      },
      tabs: [
        { label: '全部', value: 'all', icon: '🌟' },
        { label: '提问', value: 'question', icon: '❓' },
        { label: '讨论', value: 'discussion', icon: '💭' },
        { label: '笔记', value: 'note', icon: '📝' }
      ],
      contentList: [
        {
          id: 1,
          type: 'question',
          title: '如何有效记忆不规则动词？',
          content: '最近在学习不规则动词，感觉很难记住，有什么好的记忆方法吗？',
          username: '小明',
          avatar: 'https://img2.baidu.com/it/u=3217680303,2921825&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
          time: '10分钟前',
          likes: 12,
          isLiked: false,
          showComments: false,
          comments: [
            {
              id: 1,
              username: '老师',
              avatar: 'https://img1.baidu.com/it/u=431057092,2993997530&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              content: '建议按照频率分组记忆，每天记忆5个，多加练习和复习。',
              time: '5分钟前'
            }
          ]
        },
        {
          id: 2,
          type: 'note',
          title: '现在完成时用法总结',
          content: '现在完成时表示过去发生的动作对现在造成的影响，常用have/has + 过去分词的形式...',
          username: '小红',
          avatar: 'https://img0.baidu.com/it/u=2228440764,1588743699&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
          time: '1小时前',
          likes: 25,
          isLiked: true,
          showComments: false,
          comments: []
        },
        {
          id: 3,
          type: 'discussion',
          title: '如何提高口语流畅度？',
          content: '想和大家讨论一下如何提高英语口语的流畅度，有什么好的练习方法吗？',
          username: '小华',
          avatar: 'https://img2.baidu.com/it/u=1503067352,2822596172&fm=253&fmt=auto?w=500&h=500',
          time: '2小时前',
          likes: 18,
          isLiked: false,
          showComments: false,
          comments: []
        }
      ]
    }
  },
  computed: {
    filteredContent() {
      if (this.currentTab === 'all') return this.contentList
      return this.contentList.filter((item) => item.type === this.currentTab)
    }
  },
  methods: {
    getTypeLabel(type) {
      const typeMap = {
        question: '提问',
        discussion: '讨论',
        note: '笔记'
      }
      return typeMap[type] || type
    },
    handleLike(item) {
      item.isLiked = !item.isLiked
      item.likes += item.isLiked ? 1 : -1
    },
    handleComment(item) {
      item.showComments = !item.showComments
    },
    handleShare(item) {
      // 实现分享功能
      console.log('分享:', item.title)
    },
    submitComment(item) {
      if (!this.newComment.trim()) return

      item.comments.push({
        id: Date.now(),
        username: '我',
        avatar: 'https://example.com/avatar.jpg',
        content: this.newComment,
        time: '刚刚'
      })
      this.newComment = ''
    },
    submitPost() {
      // 实现发布功能
      const post = {
        id: Date.now(),
        ...this.newPost,
        username: '我',
        avatar: 'https://example.com/avatar.jpg',
        time: '刚刚',
        likes: 0,
        isLiked: false,
        comments: [],
        showComments: false
      }
      this.contentList.unshift(post)
      this.showCreateDialog = false
      this.newPost = {
        type: 'discussion',
        title: '',
        content: '',
        images: []
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.create-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.create-btn:hover {
  background: #66b1ff;
}

.category-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 12px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.content-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.post-time {
  font-size: 12px;
  color: #909399;
}

.content-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.question {
  background: #409eff;
}
.discussion {
  background: #67c23a;
}
.note {
  background: #e6a23c;
}

.content-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
}

.content-text {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.content-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.content-images img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.action-buttons {
  display: flex;
  gap: 24px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  color: #409eff;
}

.comments-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.comment-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.comment-username {
  font-size: 14px;
  color: #303133;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-text {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.comment-input {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.comment-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.comment-input button {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 500px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.form-item input,
.form-item select,
.form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.upload-area {
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary,
.btn-secondary {
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-secondary {
  background: #f4f4f5;
  color: #606266;
}

@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .content-images {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .dialog-content {
    width: 90%;
    margin: 20px;
  }
}
</style>
